<template>
    <div class="box_alarm">
        <MoodalTitle :title="'市政问题发生时间趋势分析'">
            <TimeTab :timeList="timeList" @timeReturnFn="timeReturnFn"/>
        </MoodalTitle>
        <div class="chuzhi-charts" ref="chuzhiCharts"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {ZhiShiJianGuan} from '@/api/zhangzi/index'
import TimeTab from '@/components/TimeTab/Index.vue'
export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            timeList: [
                {
                    title: '日',
                    value: 0,
                },
                {
                    title: '周',
                    value: 1,
                },
                {
                    title: '月',
                    value: 2,
                },
            ],
            dateType:0
        }
    },
    mounted() { this.chuzhiChartsData() },
    methods: {
        timeReturnFn(val){
            this.dateType = val.value
            this.chuzhiChartsData()
            console.log(val,'val');
        },
        // 市政问题发生时间趋势分析
        chuzhiChartsData() {
            let page = {
                dateType:this.dateType
            }
            let sum = []
            let time = [] //时间
            ZhiShiJianGuan.getTimeTrend(page).then(res =>{
                console.log(res,'市政问题发生时间趋势分析');
                if(res.code == 200){
                    res.data.forEach(item => {
                        sum.push(item.sum)
                        time.push(item.time)
                    })
                    this.chuzhiChartsFn(sum,time)
                }
            })
        },
        chuzhiChartsFn(sum,time) {
            let xData = time;  //x数据
            let colorList = ['#A1E3FD', '#005BC7',]
            let firstIndustry = sum; //上报
            let charts = echarts.init(this.$refs.chuzhiCharts)
            let option = {
                color: colorList,
                backgroundColor: "",
                grid: {
                    top: '15%',
                    left: '0',
                    right: '20',
                    bottom: '0',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false, //顶头显示
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: 'rgba(36, 173, 254, 1)',
                            fontSize: "1.4rem"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#5FD7FC',
                            }
                        },
                        data: xData,
                    }
                ],
                yAxis: [
                    {
                        // type: 'value',
                        name: '数量',
                        axisLabel: {
                            // formatter: '{value} '
                            color: '#fff', // 坐标轴label文字颜色

                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                // color: '#5FD7FC',
                                // fontSize: "1rem"
                            }
                        },
                        axisLine: {
                            //y轴线的颜色以及宽度
                            show: true,
                            lineStyle: {
                                color: '#5FD7FC',
                            }
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "上报",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(0, 214, 251, 1)', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0.3,
                                            color: 'rgba(0, 91, 199, .6)',
                                        },
                                        
                                        {
                                            offset: 1,
                                            color: 'rgba(30, 29, 40, .1)',
                                        },
                                    ]),
                        }
                    },
                ]
            }
            charts.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 33.6rem !important;
    margin-bottom: 1.9rem;
}

.chuzhi-charts {
    width: 100%;
    height: 26.3rem;
}
</style>